<template>
  <div class="overview-self">
    <div class="module-title">
      <div class="line"></div>
      <span class="title">个人数据</span>
      <div class="line"></div>
    </div>
    <ul class="count-list">
      <li class="count-wrap">
        <div class="title">本月销售额</div>
        <div class="number">{{totalOrderAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">本月保底任务</div>
        <div class="number">{{totalTaskAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">本月资源价格</div>
        <div class="number">{{totalAdCost}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">ROI</div>
        <div class="number">{{totalAdCode}}</div>
      </li>
    </ul>
    <ul class="count-list">
      <li class="count-wrap">
        <div class="title">暂不发货金额</div>
        <div class="number">{{delayShipOrderAmount}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">当前段位</div>
        <div class="number">{{division.division}}</div>
      </li>
      <li class="count-wrap">
        <div class="title">晋升下一段位还需</div>
        <div class="number">{{division.nextDivisionAmount}}<span>({{division.nextRate}}%)</span></div>
      </li>
      <li class="count-wrap">
        <div class="title">当前提成金额</div>
        <div class="number">{{division.rateAmount}}<span>({{division.rate}}%)</span></div>
      </li>
    </ul>
    <ul class="chart-list">
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="newOrderProcess+'%'" :echarts="echarts" :onInit="initChart3" ref="chart3"
                     canvasId="self-newOrderProcess"/>
        </div>
        <div class="title">新单占比</div>
      </li>
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="taskProcess + '%'" :echarts="echarts" :onInit="initChart1" ref="chart1"
                     canvasId="self-taskProcess"/>
        </div>
        <div class="title">本月完成进度</div>
      </li>
      <li class="chart">
        <div class="canvas">
          <m-echarts :title="timeProcess+'%'" :echarts="echarts" :onInit="initChart2" ref="chart2"
                     canvasId="self-timeProcess"/>
        </div>
        <div class="title">本月时间进度</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import * as echarts from "utils/echarts";
  import mEcharts from "components/echarts";
  import timeFormat from "utils/time-format";

  export default {
    name: 'overviewSelf',
    data() {
      return {
        echarts,
        totalOrderAmount: 0,
        totalTaskAmount: 0,
        delayShipOrderAmount: 0,
        totalAdCost: 0,
        totalAdCode: 0,
        options1: {},
        options2: {},
        timeProcess: 0,
        taskProcess: 0,
        newOrderProcess: 0,
        division: {},
      };
    },
    components: {
      mEcharts
    },
    methods: {
      initChart1(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        this.chart1 = chart;
        return chart;
      },
      initChart2(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        const current = new Date();
        const day = current.getDate();
        current.setDate(1);
        current.setMonth(current.getMonth() + 1);
        current.setDate(current.getDate() - 1);
        this.timeProcess = parseFloat(day / current.getDate() * 100).toFixed(1) - 0;
        const options = {
          color: [
            new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: "#FEC3C3" },
                { offset: 1, color: "#FF8B8C" }
              ]
            ), "#E0E4EB"
          ],
          series: [
            {
              name: "时间进度",
              type: "pie",
              radius: [ "80%", "100%" ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: this.timeProcess, name: "已完成" },
                { value: 100 - this.timeProcess, name: "未完成" }
              ]
            }
          ]
        };
        chart.setOption(options, true);
        return chart;
      },
      initChart3(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        this.chart3 = chart;
        return chart;
      },
      async init() {
        wx.showLoading();
        const dataResult = await wx.request({
          url: "/bg/sales/report/salesRankReport",
          data: {
            startTime: timeFormat.fetch(Date.now(), "{YYYY}-{MM}-01 00:00:00"),
            endTime: timeFormat.fetch(Date.now(), "{YYYY}-{MM}-31 23:59:59")
          }
        });
        wx.hideLoading();
        if (dataResult.code === 200) {
          let currentData;
          dataResult.data.some(data => {
            if(data.salesUserId === App.sysUserId){
              currentData = data;
            }
          })
          console.info(currentData)
          this.totalTaskAmount = parseInt(currentData.taskAmount || 0);
          this.delayShipOrderAmount = currentData.delayShipOrderAmount || 0;
          this.totalOrderAmount = parseInt(currentData.totalOrderAmount || 0);
          this.totalAdCost = parseInt(currentData.adCost || 0);;
          this.totalAdCode = this.totalAdCost ? parseFloat(this.totalAdCost == 0 ? 0 : this.totalOrderAmount / this.totalAdCost).toFixed(2) : this.totalOrderAmount;
          this.taskProcess = this.totalTaskAmount ? parseFloat(this.totalOrderAmount / this.totalTaskAmount * 100).toFixed(1) - 0 : 100;
          this.newOrderProcess = parseFloat(currentData.newOrderNum / currentData.totalOrderNum * 100).toFixed(1) - 0;
          const divisionResult = await wx.request({
            url: '/bg/finance/report/division',
            data: {
              amount: this.totalOrderAmount*100
            }
          })
          if (divisionResult.code === 200) {
            this.division = divisionResult.data;
          } else {
            wx.showToast(divisionResult.message);
          }
          const options = {
            color: [
              new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: "#9CE9DE" },
                  { offset: 1, color: "#14D2B8" }
                ]
              ), "#E0E4EB"
            ],
            series: [
              {
                name: "完成率",
                type: "pie",
                radius: [ "80%", "100%" ],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "center"
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  { value: this.taskProcess, name: "已完成" },
                  { value: 100 - this.taskProcess, name: "未完成" }
                ]
              }
            ]
          };
          if(this.chart1){
            this.chart1.setOption(options, true);
          }else{
            setTimeout(() => {
              this.chart1.setOption(options, true);
            }, 1000)
          }
          const orderOptions = {
            color: [
              new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: "#CAC4FF" },
                  { offset: 1, color: "#6E5EFF" }
                ]
              ), "#E0E4EB"
            ],
            series: [
              {
                name: "新单占比",
                type: "pie",
                radius: [ "80%", "100%" ],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: "center"
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  { value: this.newOrderProcess, name: "已完成" },
                  { value: 100 - this.newOrderProcess, name: "未完成" }
                ]
              }
            ]
          };
          if(this.chart3){
            this.chart3.setOption(orderOptions, true);
          }else{
            setTimeout(() => {
              this.chart3.setOption(orderOptions, true);
            }, 1000)
          }
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "../../../styles/base";

  .overview-self {
    padding-top: pxToRem(20);
    .module-title {
      display: flex;
      align-items: center;
      padding-left: pxToRem(20);
      .title {
        font-size: pxToRem(36);
        margin-left: pxToRem(10);
        margin-right: pxToRem(10);
      }
      .line {
        width: pxToRem(20);
        height: pxToRem(4);
        background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      }
    }
    .chart-list {
      display: flex;
      align-items: center;
      margin: pxToRem(20) auto;
      padding: pxToRem(40);
      width: pxToRem(710);
      height: pxToRem(300);
      box-shadow: 0 0 pxToRem(20) 0 rgba(59, 74, 116, 0.14);
      border-radius: pxToRem(40);
      justify-content: space-between;
      box-sizing: border-box;
      .chart {
        padding-top: pxToRem(5);
        width: pxToRem(168);
        height: pxToRem(220);
        text-align: center;
        .canvas {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: pxToRem(160);
          height: pxToRem(160);
        }
        .title {
          padding-top: pxToRem(10);
          font-size: pxToRem(28);
          line-height: pxToRem(40);
          color: #140F26;
          text-align: center;
        }
      }
    }
  }
</style>
